import React from 'react';
import { chartData } from 'utils';
import router from 'umi/router';
import { EChart, Table } from 'components';
import styles from './style.less';

// const reporterTypeArr = [null, "bar", "pie", "line", "area", "table", "hbar"];

const { dataParse, setOption } = chartData;

class dataPreview extends React.Component {
  option = null;
  reporterType = null;
  static defaultProps = {
    data: {},
  };
  constructor(props) {
    super(props);
    this.state = {
      time: new Date().getTime(),
      summary: [],
      SummaryType: 0,
    };
  }

  componentDidMount() {
    this.refreshChart();
  }

  refreshChart = () => {
    const { data } = this.props;
    const parseData = dataParse(data);
    const {
      reporterType,
      // legendData,
      // dimensionAxis,
      // datas,
      // measureList,
      // dimensionList,
    } = parseData;

    // 图表类型
    this.reporterType = reporterType;
    this.option = setOption({
      parseData,
      isPreview: true,
    });
    this.setState({
      time: new Date().getTime(),
    });
  };

  showDetaile = () => {
    const { data = {} } = this.props;
    router.push({
      pathname: '/chartDetail',
      state: data,
    });
  };

  render() {
    const { data = {} } = this.props;
    const { ReprotName = '' } = data;
    return (
      <div
        key={`${data.ID}_${data.blockId}`}
        onClick={this.showDetaile}
        className={styles['data-preview']}
      >
        <div className={styles['data-card']}>
          <div className={styles['card-header']}>{ReprotName}</div>
          <div className={styles['card-body']}>
            {this.option &&
              (this.reporterType === 'table' ? (
                <div className={styles['table-preview']}>
                  <Table {...this.option} />
                </div>
              ) : (
                <EChart option={this.option} />
              ))}
          </div>
        </div>
      </div>
    );
  }
}

export default dataPreview;
